<%@ page contentType="text/html;charset=UTF-8" pageEncoding="UTF-8" %>
<%@ include file="/WEB-INF/page/common/taglib.jsp" %>
<!DOCTYPE html>
<html>
<head>
    <title>列表页面</title>
    <%@ include file="/WEB-INF/page/common/common.jsp" %>
</head>
<body>
<div class="container" id="rzos">
    <div class="panel panel-default">
        <div class="panel-heading text-center">
            <h2>全文搜索demo</h2>
        </div>
        <div class="panel-body">
            <form class="form-inline">
                <div class="form-group">
                    <label for="">类型：</label>
                    <select class="form-control" v-model="type">
                        <option>blog</option>
                        <option>product</option>
                    </select>
                </div>

                <div class="form-group">
                    <label for="">关键字：</label>
                    <div class="input-group">
                        <input type="text" class="form-control" v-model="q.keyWord" placeholder="请输入要搜索的关键词....">
                        <span class="input-group-btn">
                    <button class="btn btn-default" @click="query" type="button">Go!</button>
                </span>
                    </div>
                </div>
            </form>

            <div style="margin-top: 10px;"></div>

            <template>
                <ul class="list-group" v-for="blog in blogs">
                    <li class="list-group-item">
                        <div v-html='blog.title'>测试</div>
                        <div v-html='blog.text'>测试</div>
                    </li>
                </ul>
            </template>
        </div>
    </div>
</div>
</body>
<script>
    $(function () {
        //回车事件
        $(document).keyup(function (e) {
            if (e.which === 13) {
                vm.query();
            }
        })
    });

    var vm = new Vue({
        el: "#rzos",
        data: {
            q: {
                keyWord: 'blog'
            },
            type: "blog",
            blogs: {
                title: '',
                text: ''
            }
        },
        methods: {
            query: function () {
                var keyWord = vm.q.keyWord;
                console.log(vm.type);
                $.ajax({
                    type: "POST",
                    url: "/es//index/query/website/" + vm.type,
                    data: {"param": "title=" + keyWord},
                    success: function (r) {
                        vm.blogs = r.data;
                    }
                });
            }
        }
    })

</script>
</html>
